<template>
  <div class="content w-full">
    <BorderBox1 class="bg-gray-800 py-1 w-full h-full">
      <div class="grid grid-rows-6 h-full gap-2">
        <MainTitle class="row-span-1"></MainTitle>
        <div class="top grid grid-cols-3 gap-2 row-span-2">
          <div class="pl-4 h-full">
            <Number :title="`申请总数`" :data="data"></Number>
          </div>
          <div class="">
            <Number :title="`在职人数`" :data="data"></Number>
          </div>
<!--          <div class="pr-4">-->
<!--            <Number :title="`申请总数2`"></Number>-->
<!--          </div>-->
          <div class="pr-4">
            <Percent :BarData="BarData"></Percent>
          </div>
        </div>
        <div class="bottom row-span-3 grid grid-cols-3 gap-2">
            <div class="pl-4 pb-6">
              <List :list="registrants_rank" :title="`注册人数排名`"></List>
            </div>
            <div class="pb-6">
              <List :list="served_rank" :title="`服务会员人数排名`"></List>
            </div>
            <div class="pr-4 pb-6">
              <List :list="excellent_rank" :title="`优秀健康管理师排名`"></List>
            </div>
        </div>
      </div>
    </BorderBox1>
  </div>
</template>
<script setup>
import { BorderBox1, BorderBox10, Decoration4, Decoration5, Decoration7, Decoration8, Decoration9 } from '@kjgl77/datav-vue3'
import { useRoute } from 'vue-router';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

import { getAllStewardData } from '@/api/memberManager'
import MainTitle from '@/view/allHealthManager/components/mainTitle.vue'
import Number from '@/view/allHealthManager/components/number.vue'
import List from '@/view/allHealthManager/components/list.vue'
import Percent from '@/view/allHealthManager/model/percent.vue'



const route = useRoute()

onMounted(
  () => {
    init()
  }
)

const BarData = ref([])
const data = ref({})
const registrants_rank = ref([])
const served_rank = ref([])
const excellent_rank = ref([])

const init = async () => {
  const res = await getAllStewardData()
  data.value = res.data
  BarData.value = data.value.level_proportion
  registrants_rank.value = data.value.registrants_rank
  served_rank.value = data.value.served_rank
  excellent_rank.value = data.value.excellent_rank
  console.log(data.value)
}

</script>

<style scoped lang="scss">
.contents{
  font-size: 28px;
  text-shadow: 0 0 3px #7acaec;
}
.content {
  height: calc(100vh - 130px);

}
</style>
